<template>
	<div class="flex-wrap-column">
		<CustomTabs :tabList="tabList" v-model:tabActive="tabActive">
			<template #right>
				<custom-btn v-if="tabActive === 2" @click="createDepartment">
					+创建部门组
				</custom-btn>
			</template>
		</CustomTabs>
		<CustomGmSearch
			:col="columns"
			:tableData="tableData"
			:formList="formList"
			v-model:formData="formData"
			@control-handel="controlHandel"
		>
			<template #floor v-if="tabActive === 1 && false">
				<div class="hint">
					<div class="hint-left">
						<img src="@/assets/icon/company/notice.png" alt="" />
						<p>
							归属全公司的负责人拥有系统最高权限,可查看全公司数据；部门负责人默认拥有本部门数据权限;
						</p>
					</div>
					<div class="hint-right"></div>
				</div>
			</template>
		</CustomGmSearch>
	</div>
	<custom-dialog
		v-model:visible="visible"
		:title="dialogTitle"
		@confirm="confirm"
	>
		<template #toast>
			<div class="delProp" v-if="handelType === '删除'">
				<h3>请输入贵公司的[企业简称]名称，确认后即可删除</h3>
				<el-input v-model="enterpriseName" placeholder="请输入"></el-input>
			</div>
			<div class="add" v-if="['添加', '编辑'].includes(handelType)">
				<el-form
					ref="ruleFormRef"
					:model="departmentForm"
					:rules="rules"
					label-width="auto"
				>
					<el-form-item label="分组名称" prop="groupName">
						<el-input v-model="departmentForm.groupName" placeholder="请输入" />
					</el-form-item>
					<el-form-item
						label="所属部门"
						prop="departmentId"
						v-if="handelType === '添加'"
					>
						<el-select
							v-model="departmentForm.departmentId"
							placeholder="请选择"
							clearable
						>
							<el-option
								v-for="item in departmentList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
		</template>
	</custom-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import CustomTabs from '@/components/customTabs/index.vue'
import CustomGmSearch from '@/components/customGmSearch/index.vue'
import CustomBtn from '@/components/customBtn/index.vue'
import {
	getEnterpriseById,
	getDepartmentsById,
	deleteCompanyDepartment,
	addDepartmentsGroups,
	deleteDepartmentsGroups,
} from '@/api/company'
import { userStorage } from '@/utils/storage'
import { ElMessage } from 'element-plus'
const { enterpriseId } = userStorage.get()
const tabList = [
	{
		label: '部门管理',
		id: 1,
	},
	{
		label: '部门分组',
		id: 2,
	},
]
const tabActive = ref(1)
const columns = computed(() => {
	return columnsList[tabActive.value - 1]
})
const formData = reactive({
	departmentId: '',
})
watch(
	() => formData.departmentId,
	(departmentId) => {
		getGroupList(
			departmentId
				? {
						departmentId,
				  }
				: {}
		)
	},
	{
		deep: true,
	}
)
const formList = computed(() => {
	return tabActive.value === 2
		? [
				{
					type: 'select',
					props: 'departmentId',
					set: {
						placeholder: '请选择部门',
					},
					options: [
						{
							label: '全部部门',
							value: '',
						},
						...departmentList.value,
					],
				},
		  ]
		: []
})
const columnsList = [
	[
		{ prop: 'departmentId', label: '部门ID', width: 200 },
		{ prop: 'departmentName', label: '部门名称', width: 200, type: 'link' },
		{ prop: 'departmentHead', label: '部门负责人' },
		// { prop: 'parentDepartmentName', label: '上级部门' },
		{ prop: 'departmentGroups', label: '部门分组' },
		// {
		// 	prop: 'control',
		// 	label: '操作',
		// 	type: 'control',
		// 	width: 80,
		// 	set: {
		// 		orderList: [
		// 			{
		// 				title: '编辑',
		// 				icon: 'edit',
		// 			},
		// 			{
		// 				title: '删除',
		// 				icon: 'prohibit',
		// 			},
		// 		],
		// 	},
		// },
	],
	[
		{ prop: 'departmentGroupId', label: '部门分组ID', width: 300 },
		{ prop: 'departmentName', label: '部门名称', type: 'link' },
		{ prop: 'departmentGroupName', label: '部门分组' },
		{
			prop: 'control',
			label: '操作',
			type: 'control',
			width: 80,
			set: {
				orderList: [
					{
						title: '编辑',
						icon: 'edit',
					},
					{
						title: '删除',
						icon: 'prohibit',
					},
				],
			},
		},
	],
]
const departmentForm = reactive({
	enterpriseId: userStorage.get().enterpriseId,
	departmentId: '',
	groupName: '',
})
const rules = {
	groupName: [
		{ required: true, message: '分组名称不能为空', trigger: 'blur' },
		{ max: 10, message: '分组名称不能超过10个字符', trigger: 'blur' },
	],
	departmentId: [
		{
			required: true,
			message: '请选择所属部门',
			trigger: 'change',
		},
	],
}
const tableData = ref([])
// 操作列操作
const visible = ref(false)
const exitFn = () => {}
const topicTitle = ref('')
const companyName = ref('')
const currentRow = ref(null)
const handelType = ref(null)
const controlHandel = (e: any, row) => {
	handelType.value = e
	currentRow.value = row
	visible.value = true
	departmentForm.departmentId = ''
	departmentForm.groupName = ''
	switch (e) {
		case '编辑':
			topicTitle.value = ''
			break
		case '删除':
			topicTitle.value = ''
			break
	}
}
// 获取部门列表
const departmentList = ref([])
const getDepartmentList = async () => {
	try {
		const { code, data: res } = await getEnterpriseById(enterpriseId)
		if (code === 200) {
			if (res) {
				tableData.value = res as Array<any>
				departmentList.value = tableData.value.map((item) => {
					return {
						label: item.departmentName,
						value: item.id,
					}
				})
			}
		}
	} catch (error) {}
}
// 获取分组列表
const getGroupList = async (par = {}) => {
	try {
		const { code, data: res } = await getDepartmentsById(enterpriseId, par)
		if (code === 200) {
			if (res) {
				tableData.value = res as Array<any>
			}
		}
	} catch (error) {}
}
watch(
	() => tabActive.value,
	(val) => {
		switch (val) {
			case 1:
				getDepartmentList()
				break
			case 2:
				getGroupList()
				break
		}
	},
	{
		immediate: true,
		deep: true,
	}
)
// 创建部门
const createDepartment = () => {
	visible.value = true
	handelType.value = '添加'
}
const mapKey = {
	添加: '部门分组设置',
	删除: '',
	编辑: '部门设置',
}
const dialogTitle = computed(() => {
	return mapKey[handelType.value]
})
// 确认弹框处理区域
const enterpriseName = ref('') //企业简称
const ruleFormRef = ref(null)
const confirm = async () => {
	switch (handelType.value) {
		case '添加':
			await ruleFormRef.value.validate(async (valid, fields) => {
				if (valid) {
					const {
						code,
						data: res,
						message,
					} = await addDepartmentsGroups(departmentForm)
					if (code === 200) {
						getGroupList()
						ElMessage.success(message)
						visible.value = false
					}
				} else {
					console.log('error submit!', fields)
				}
			})
			break
		case '编辑':
			await ruleFormRef.value.validate(async (valid, fields) => {
				if (valid) {
				} else {
					console.log('error submit!', fields)
				}
			})
			break
		case '删除':
			const { id } = currentRow.value
			if (!enterpriseName.value) return ElMessage.error('请输入企业简称！')
			const {
				code,
				data: res,
				message,
			} = await deleteDepartmentsGroups({
				groupId: id,
				enterpriseName: enterpriseName.value,
			})
			if (code === 200) {
				ElMessage.success(message)
				visible.value = false
				getGroupList()
			} else {
				ElMessage.success(message)
			}
			break
	}

	// 删除部门
	// 编辑部门
}
</script>

<style scoped lang="less">
.departManage {
	height: 100%;
	.CustomGmSearch {
		.hint {
			height: 40px;
			background: rgba(0, 109, 122, 0.05);
			border-radius: 10px 10px 10px 10px;
			border: 1px solid #006d7a;
			margin-bottom: 23px;
			display: flex;
			align-items: center;
			padding: 0 18px;
			justify-content: space-between;
			.hint-left {
				display: flex;
				align-items: center;
				> img {
					width: 20px;
					height: 22px;
					margin-right: 14px;
				}
				p {
					font-weight: 400;
					font-size: 14px;
					color: #000000;
				}
			}
			.hint-right {
				display: flex;
				align-items: center;
				font-size: 18px;
				cursor: pointer;
			}
		}
	}
}
.delProp {
	h3 {
		font-size: 16px;
		margin-bottom: 20px;
	}
}
.add {
	padding-top: 30px;
}
</style>
